<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>
            前端百宝箱
        </title>
        <style type="text/css">
            body { padding-top: 60px; padding-bottom: 10px; }
        </style>
        <link href="css/bootstrap.css" rel="stylesheet">
		<link href="css/main.css" rel="stylesheet">
        <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
            </script>
        <![endif]-->
    </head>
    
    <body>
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar">
                        </span>
                        <span class="icon-bar">
                        </span>
                        <span class="icon-bar">
                        </span>
                    </a>
                    <a class="brand" href="#">
                        前端百宝箱
                    </a>
                    <div class="nav-collapse">
                        <ul class="nav">
                            <li class="active">
                                <a href="#">
                                    首页
                                </a>
                            </li>
                            <li>
                                <a href="html.html">
                                    HTML
                                </a>
                            </li>
                            <li>
                                <a href="css.html">
                                    CSS
                                </a>
                            </li>
                            <li>
                                <a href="javascript.html">
                                    JavaScript
                                </a>
                            </li>
                            <li>
                                <a href="tools.html">
                                    工具
                                </a>
                            </li>
							 <li><a href="resources.html">资源</a></li>
                            <li>
                                <a href="#about" data-toggle="modal" data-keyboard="false" data-backdrop="false">
                                    关于
                                </a>
                            </li>
                        </ul>
                    </div>
                    <!--/.nav-collapse -->
                </div>
            </div>
        </div>
        <div class="container">
            <div class="hero-unit">
                <h1>
                    前端开发百宝箱
                </h1>
                <p>
                    收集前端开发常用到的 HTML、CSS、JavaScript 资源和工具！包括代码编写技巧，代码美化工具，代码质量保证工具，常用代码片段，优秀开发框架和学习资源等等。帮助开发人员节省时间和精力！
                </p>
                <p>
                    <a class="btn btn-primary btn-large">
                        详细内容 &raquo;
                    </a>
                </p>
            </div>
            <!-- Example row of columns -->
            <div class="row">
                <div class="span4">
                    <h2>
                        HTML
                    </h2>
                    <p>
                        收集 HTML 代码代码编写技巧，HTML 美化工具，HTML 在线编辑工具，HTML 代码检查工具等等
                    </p>
                    <p>
                        <a class="btn" href="html.html">
                            查看详情 &raquo;
                        </a>
                    </p>
                </div>
                <div class="span4">
                    <h2>
                        CSS
                    </h2>
                    <p>
                        收集 CSS 代码编写技巧，CSS 代码美化工具，CSS 在线编辑工具，在线 CSS 按钮生成工具等等
                    </p>
                    <p>
                        <a class="btn" href="css.html">
                            查看详情 &raquo;
                        </a>
                    </p>
                </div>
                <div class="span4">
                    <h2>
                        JavaScript
                    </h2>
                    <p>
                        收集 JavaScript 代码编写技巧，代码美化工具，JavaScript 质量保证工具以及常用的功能组件等等
                    </p>
                    <p>
                        <a class="btn" href="javascript.html">
                            查看详情 &raquo;
                        </a>
                    </p>
                </div>
            </div>
            <hr>
            <footer>
                <p>
                    Hongbo Li &copy; 2012 Powered by
                    <a href="docs/bootstrap/index.html" target="_blank">
                        Bootstrap
                    </a>
                </p>
            </footer>
            <!--modal dialog-->
            <div class="modal fade" id="about">
                <div class="modal-header">
                    <a class="close" data-dismiss="modal">×</a>
                    <h3>关于</h3>
                </div>
                <div class="modal-body">
                    <p>
                        作&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;者：李洪波
                    </p>
                    <p>创建时间：2012.7.26</p>
					<p>修订记录：
						<br/>
						<ul>
							<li>
								建立框架 2012.7.26
							</li>
							<li>
								添加HTML专题页面
							</li>
							<li>
								添加CSS专题页面
							</li>
							<li>
								添加JavaScript专题页面
							</li>
						</ul>
					</p>
                </div>
                <div class="modal-footer">
                    <a class="btn" data-dismiss="modal">
                        关闭
                    </a>
                    <!--<a href="#" class="btn btn-primary">保存更新</a>-->
                </div>
            </div>
        </div>
        <script src="js/jquery-1.7.1.min.js"></script>
        <script src="js/bootstrap.js"></script>
    </body>

</html>
